<template>
  <div class="page">
    <el-card class="box-card chat-box-card">
      <div class="chat-wrapper">
        <!-- 左侧边栏 -->
        <div class="chat-sidebar">
          <div class="user-info">
            <el-avatar :size="48" :src="avatarUrl" />
            <div class="username">
              {{ nickname }}
            </div>
          </div>
          <!-- 好友列表 -->
          <div class="chat-list">
            <chat-list ref="chatListEl" :list="chatList" @changeChatItem="handleChangeChatItem"
              height="880px"></chat-list>
          </div>
        </div>
        <div class="chat-msg-wrapper">
          <!-- 好友名 -->
          <div class="chat-msg-top">
            {{ targetName }}
          </div>
          <!-- 消息列表 -->
          <div class="chat-msg-list">
            <!-- 消息列表 -->
            <msg-list :msgs="msgs" height="600px"></msg-list>
          </div>
          <!-- 编辑栏 -->
          <div class="chat-msg-editor">
            <div class="editor">
              <el-input v-model="inputMsg" @keyup.enter="handleSendMsg" type="textarea" :rows="8" resize="none"
                :maxlength="200" placeholder="Enter回车即可发送" />
            </div>
            <div class="editor-bottom-wrapper">
              <div class="text-count">{{ inputMsg.length }}/200</div>
              <div class="btn-wrapper">
                <el-button type="">取消</el-button>
                <el-button type="primary">发送</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ChatList from './components/ChatList.vue'
import MsgList from './components/MsgList.vue'
export default {
  name: 'ChatView',
  components: {
    ChatList,
    MsgList
  },
  data() {
    return {
      // avatarUrl: ""
      inputMsg: "",
      targetName: "",
      chatList: [
        {
          avatarUrl: 'http://127.0.0.1:3000/images/45fbb8709211c3cdd8eb62e00.jpg',
          name: "花好月圆",
          date: "18:32",
          msg: "test message"
        },
        {
          avatarUrl: 'http://127.0.0.1:3000/images/adf884768cd8376051a507e01wallhaven-9mqqq8.png',
          name: "乘风破浪",
          date: "10:11",
          msg: "test message"
        },
        {
          avatarUrl: 'http://127.0.0.1:3000/images/dc90d1db03722ade0531d9805.jpg',
          name: "沙漠孤狼",
          date: "14:01",
          msg: "test message"
        }
      ],
      msgs: [
        {
          avatarUrl: 'http://127.0.0.1:3000/images/45fbb8709211c3cdd8eb62e00.jpg',
          msg: "你好，很高兴认识你😀",
          posistion: 'left'
        },
      ]
    }
  },
  computed: {
    ...mapState({
      nickname: state => state.user.nickname,
      avatarUrl: state => state.user.avatarUrl
    }),
  },
  mounted() {
    if (this.chatList.length > 0) {
      this.handleChangeChatItem(0)
    }
  },
  methods: {
    handleSendMsg() {
      // 新增消息到消息列表
      const tempDate = new Date()
      const date = `${tempDate.getHours()}:${tempDate.getMinutes()}`
      this.msgs.push({
        avatarUrl: 'http://127.0.0.1:3000/images/dc90d1db03722ade0531d9806.jpg',
        msg: this.inputMsg,
        posistion: 'right',
        date: date
      })

      // 最后的消息更新到好友列表
      const chatIndex = this.$refs.chatListEl.currentIndex
      if (chatIndex >= 0 && chatIndex < this.chatList.length) {
        this.chatList[chatIndex].msg = this.inputMsg
        this.chatList[chatIndex].date = date
      }

      // 清空输入框
      this.inputMsg = ''
    },
    handleChangeChatItem(index) {
      //获取用户名
      this.targetName = this.chatList[index].name
      //修改聊天目标头像
      this.msgs[0].avatarUrl = this.chatList[index].avatarUrl
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card.chat-box-card {
  height: 960px;
  margin: 0 auto;

  &:deep(.el-card__body) {
    height: 100%;
    padding: 0;
  }
}

.chat-wrapper {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.chat-sidebar {
  width: 300px;
  border-right: 1px solid var(--el-border-color-light);
  // padding: 12px; 
}

.user-info {
  display: flex;
  flex-direction: row;
  height: 50px;
  padding: 12px 14px;
  color: white;
  background-color: var(--el-color-primary);

  .username {
    font-size: 14pt;
    margin-left: 10px;
    width: 200px;
    height: 50px;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.chat-msg-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;

  // padding: 12px;
  .chat-msg-top {
    height: 50px;
    padding: 10px 16px;
    line-height: 50px;
    border-bottom: 1px solid var(--el-border-color-light);
  }

  .chat-msg-list {
    flex: 1;
  }

  .chat-msg-editor {
    height: 260px;
    border-top: 1px solid var(--el-border-color-light);

    .editor {
      height: 194px;
      padding: 12px;
    }

    .editor-bottom-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 32px;
      padding: 0 16px;

      .text-count {
        font-size: 12pt;
        padding-top: 10px;
        color: var(--el-color-info);
      }

      .btn-wrapper {
        display: flex;
        flex-direction: row;
      }
    }
  }
}
</style>
